<template>
  <transition name="slide">
    <div class="circle">
      <div class="circle-wrap">
        <div class="back">
          <div @click="back">
            <img src="../../../assets/返回.png" height="16" width="19"/>
          </div>
          <span>朋友圈</span>
        </div>
        <div class="content">
          <div class="content-wrapper" ref="wrapper">
            <div class="content-text">
              <div class="content-top">
                <img class="circle-bg" src="../../../assets/find/bg-1.png"/>
                <div class="user">
                  <span>蒙圈的喵</span>
                  <img src="../../../assets/me/minion.png" height="80" width="80"/>
                </div>
              </div>
              <div class="content-body">
                <div class="msg-list" v-for="(item, index) in info">
                  <div class="msg-head-img">
                    <img :src="item.imgurl">
                  </div>
                  <div class="msg-content">
                    <h2 v-html="item.dissname"></h2>
                    <p v-html="item.sign"></p>
                    <ul>
                      <li v-if="item.album.length" v-for="(img,index) in item.album">
                        <img @click="clickImg($event)" :key="index" :src="img.url">
                        <!--<img v-preview="img.url"
                             :src="img.url"
                             :key="index"
                             preview-title-enable="true"
                             preview-nav-enable="true">-->
                      </li>
                    </ul>
                    <div class="msg-time">
                      <p v-html="item.time"></p>
                      <div>
                        <img @click.once="admire(item)" src="../../../assets/赞.png" height="20" width="20">
                        <span>{{item.num}}</span>
                        <img  @click="dissBtn(item.id,item.show,item.dissname)" class="Plun" src="../../../assets/me/pinglun.png" alt="">
                      </div>
                    </div>
                    <!--评论消息展示区-->
                    <div class="diss-show" v-show="messageshow1" v-if="item.mid===id1">
                      <h3 v-for="(ask,index) in contents">
                        <p v-show="ask.askContent">{{ask.askpeop+':'+ask.askContent}}</p>
                        <p v-show="ask.replyContent">
                          <span>{{ask.replypeople}}</span>
                          <span style="color: green">回复:蒙圈的喵</span>
                          <span>{{ask.replyContent}}</span>
                        </p>
                      </h3>
                    </div>
                    <div class="diss-show" v-show="messageshow2" v-if="item.mid===id2">
                      <h3 v-for="(ask,index) in contents">
                        <p v-show="ask.askContent">{{ask.askpeop+':'+ask.askContent}}</p>
                        <p v-show="ask.replyContent">
                          <span>{{ask.replypeople}}</span>
                          <span style="color: green">回复:蒙圈的喵</span>
                          <span>{{ask.replyContent}}</span>
                        </p>
                      </h3>
                    </div>
                  </div>
                </div>
                <div style="text-align: center;opacity: 0.6;margin-top: 20px;">----没有更多动态了----</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom" v-show="chatShow">
        <div class="send">
          <input
            type="text"
            placeholder="请输入聊天内容"
            class="sText"
            ref="sTest"
          />
          <input type="button" class="btn" value="发送" @click="sendContent"/>
        </div>
      </div>
      <big-image v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-image>
    </div>
  </transition>
</template>
<style scoped>
  .circle {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 203;
    background-color: #fff;
  }

  .back {
    background: #1e2b39;
    height: 50px;
    color: #fff;
    position: fixed;
    width: 100%;
    z-index: 99;
  }

  .back div {
    height: 50px;
    width: 50px;
  }

  .back img {
    position: absolute;
    top: 25px;
    margin-top: -8px;
    left: 14px;
  }

  .back span {
    position: absolute;
    font-size: 20px;
    top: 25px;
    margin-top: -10px;
    left: 50px;
    padding-left: 10px;
    border-left: 1px solid #000;
  }

  .content {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .content-wrapper {
    height: 100%;
    overflow: hidden;
  }

  .content-top {
    position: relative;
  }

  .circle-bg {
    width: 100%;
    margin-bottom: 20px;
  }

  .user {
    position: absolute;
    bottom: 0px;
    right: 10px;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .user span {
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 20px;
    margin-right: 10px;
  }

  .user img {
    border: 2px solid #fff;
  }

  /*朋友圈内容部分样式*/
  .content-body {
    width: 100%;
    padding: 10px;
  }

  .msg-list {
    width: 95%;
    /*position: relative;*/
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #adadad;
    margin-top: 10px;
    top: 0;
  }

  .msg-head-img {
    background: paleturquoise;
    width: 50px;
    height: 50px;
  }

  .msg-head-img img {
    width: 100%;
    height: 100%;
  }

  .msg-content {
    width: 85%;
  }

  .msg-content h2 {
    color: blue;
    font-family: '\6977\4F53';
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 10px 0;
  }

  .msg-content p {
    font-size: 16px;
    line-height: 30px;
    padding: 2px;
    margin: 0;
  }

  .msg-content ul{
    margin: 0;
    padding: 0;
  }
  .msg-content ul li {
    width: 96px;
    height: 96px;
    display: inline-block;
    padding: 2px;
  }

  .msg-content ul li img {
    width: 100%;
    height: 100%;
  }

  .msg-time {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    margin-top: 10px;
    font-size: 12px;
  }
  .msg-time p{
    font-size: 12px;
  }
  .msg-time .Plun{
    width: 20px;
    padding-left: 20px;
  }
  .diss-show{
    width: 100%;
    margin-bottom: 10px;
    background: #ede8e8;
  }
  .diss-show p{
    font-size: 14px;
    font-weight: normal;
  }

  /*聊天发送*/
  .bottom {
    position: fixed;
    height: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f2f2f2;
  }

  .send {
    display: flex;
  }

  .sText {
    flex: 6;
    height: 30px;
    margin: 10px;
    border: 0;
    padding-left: 8px;
    outline: none;
    border-bottom: 1px solid rgba(153, 153, 153, 0.8);
    /*border: 1px solid rgba(153,153,153,0.8);*/
    font-size: 15px;
    background: #f2f2f2;
  }

  .sText.active {
    background-color: red;
  }

  .btn {
    flex: 1;
    width: 65px;
    height: 30px;
    outline: none;
    margin: 10px 10px;
    border: 0;
    border-radius: 5px;
    /*float: right;*/
    text-align: center;
    font-size: 18px;
    color: white;
    background-color: #09BB07;
  }

  .slide-enter-active, .slide-leave-active {
    transition: all 0.3s;
  }

  .slide-enter, .slide-leave-to {
    transform: translate3d(100%, 0, 0);
  }

</style>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'
  // import {Toast} from 'mint-ui'
  import bigImage from '../../../common/subcomponent/bigImage'

  export default {
    name:'friendCircle',
    components: {
      bigImage,
      BScroll
    },
    data () {
      return {
        showImg: false,
        messageshow1: false,
        messageshow2: false,
        chatShow: false,
        id1: '',
        id2: '',
        imgSrc: [],
        text: '', // 输入框的文字
        info: [
          {
            id: 1,
            mid: 1,
            show: true,
            dissname: '邓伦',
            sign: '一千零一夜敬请期待!',
            imgurl: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2980592991,2084522472&fm=58&bpow=416&bpoh=416',
            album: [
              {
                url: 'https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=ac314cc83b4e251ff6faecaac6efa272/8694a4c27d1ed21be3f1c017a66eddc451da3f0c.jpg'
              }
            ],
            time: '20分钟前',
            num: 45
          },
          {
            id: 2,
            mid: 2,
            show: true,
            dissname: '迪丽热巴',
            sign: '一千零一夜正在热播哦，想要知道柏海和凌凌七的浪漫的欢喜爱情，就赶快去看吧',
            imgurl: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1812610176,882127119&fm=58&bpow=640&bpoh=820',
            album: [
              {
                url: 'https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C930%2C1319%3Bh%3D195%3Bq%3D95/sign=ae3bd3fcc18065386fa5fe53aaed8d74/d058ccbf6c81800a24f0dfbcba3533fa828b476e.jpg'
              },
              {
                url: 'https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C930%2C1319%3Bh%3D195%3Bq%3D95/sign=790f6d7610d5ad6ebeb63eaabcfb15eb/267f9e2f07082838b4248aa6b399a9014c08f153.jpg'
              },
              {
                url: 'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C930%2C1319%3Bh%3D195%3Bq%3D95/sign=6143a07ff7039245b5fabb4fbaa488f2/377adab44aed2e732959d09e8c01a18b86d6fad4.jpg'
              },
              {
                url: 'https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C930%2C1320%3Bh%3D195%3Bq%3D95/sign=f236a89142540923be26393eaf68fd39/c995d143ad4bd1130c77e18051afa40f4afb05cd.jpg'
              },
              {
                url: 'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C930%2C1319%3Bh%3D195%3Bq%3D95/sign=61a5a07ff7039245b5fabb4fbaa488f2/377adab44aed2e7329bfd09e8c01a18b87d6fa2a.jpg'
              },
              {
                url: 'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C930%2C1319%3Bh%3D195%3Bq%3D95/sign=2c5a3a6c366d55fbd1892c665012637a/4a36acaf2edda3cc7614ee920ae93901203f928b.jpg'
              }
            ],
            time: '39分钟前',
            num: 52
          },
          {
            id: 3,
            mid: 3,
            show: true,
            dissname: '王一博',
            sign: '保持最好的状态',
            imgurl: 'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=ab9143bada43ad4bb2234e92e36b31ca/f703738da9773912c1b93b7ef3198618367ae216.jpg',
            album: [
              {
                url: 'https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=e90c38903ea85edfee81f671283d6246/3ac79f3df8dcd100ef9ca9e1788b4710b8122fe9.jpg'
              },
              {
                url: 'https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=b149153f31c79f3d9becec62dbc8a674/7a899e510fb30f243ad3bcc3c295d143ac4b03a0.jpg'
              }
            ],
            time: '1小时前',
            num: 69
          },
          {
            id: 4,
            mid: 4,
            show: true,
            dissname: '黄景瑜',
            sign: '放开我北鼻，来看我们几个哥哥和宝宝的大战吧',
            imgurl: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=467768343,1640436897&fm=58&bpow=500&bpoh=673',
            album: [
              {
                url: 'http://t11.baidu.com/it/u=180044911,896765672&fm=173&app=25&f=JPEG?w=640&h=967&s=8033CF364D5273C466FC51CA030070B2'
              },
              {
                url: 'http://t10.baidu.com/it/u=783415572,1540164959&fm=173&app=25&f=JPEG?w=640&h=969&s=8060DF16431247C454F521CE030080B3'
              },
              {
                url: 'http://t10.baidu.com/it/u=3413917767,2479636133&fm=173&app=25&f=JPEG?w=640&h=976&s=8060DF104D0276C0106C81DC0300C0A1'
              },
              {
                url: 'http://t10.baidu.com/it/u=1455121149,2273921481&fm=173&app=25&f=JPEG?w=640&h=994&s=8860CF104F034EC02C547CCE0300E0B0'
              }
            ],
            time: '1小时前',
            num: 109
          }
        ],
        replyName: '',
        randomReply: [
          '谢谢你的赞？',
          '真的吗！',
          '最近可好啊？',
          '好久不见了',
          '你也是这样的',
          '先告诉我你是谁。',
          '要不要聚一聚！',
          '我选择沉默',
          '来吧，一起吹牛逼。。',
          '私聊好吧',
          '可以约一波',
          '你现在在干嘛呢',
          '心情还可以吧',
          '要不要一起吃个饭',
          '你约一下其他人吧',
          '先给我一个让我回复你的理由',
          '哈哈哈'
        ],
        contents: []
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.wrapper, {
          click: true
        })
      })
    },
    methods: {
      back () {
        this.$router.back()   // 返回上一级
      },
      admire (item) {
        // console.log(item)
        item.num += 1
      },
      clickImg (e) {
        // console.log(e)
        this.showImg = true
        // 获取当前图片地址
        // this.imgSrc = e.currentTarget.src
        this.imgSrc = e.path[0].currentSrc
        // console.log(this.imgSrc)
      },
      viewImg () {
        this.showImg = false
      },
      dissBtn (id, show, name) {
        // Toast({
        //   message: id + '-' + mid,
        //   position: 'middle',
        //   duration: 1000
        // })
        this.replyName = ''
        this.replyName = name
        if (id === 1) {
          this.id1 = id
          this.messageshow1 = show
          this.contents = [] // 清空聊天记录
          this.chatShow = true
          this.contents = []
        }
        if (id === 2) {
          this.id2 = id
          this.contents = [] // 清空聊天记录
          this.messageshow2 = show
          this.chatShow = true
        }
      },
      sendContent () {
        this.text = this.$refs.sTest.value
        if (this.text !== '') {
          this.contents.push({
            askpeop: '蒙圈的喵',
            askContent: this.text
          })

          setTimeout(() => { // 回复者的消息
            this.contents.push({
              replypeople: '',
              replyContent: this.randomReply[Math.floor(Math.random() * 19)]
            })
            for (let i = 0; i < this.contents.length; i++) { // 定义回复者的头像
              this.contents[i].replypeople = this.replyName
            }
          }, 1000)
        }
        this.$refs.sTest.value = '' // 清空输入框的内容
        this.chatShow = false
      }
    }
  }
</script>

